const theme = {
  breakpoints: [32, 48, 64, 80],
  space: [0, 4, 8, 16, 32, 64, 128],
  fonts: {
    sans: 'system-ui, sans-serif',
    mono: 'Menlo, monospace'
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72, 96],
  colors: {
    black: '#000',
    white: '#fff',

    gray0: '#f8f9f9',
    gray1: '#ebedee',
    gray2: '#dee1e3',
    gray3: '#cfd3d6',
    gray4: '#bec4c8',
    gray5: '#acb4b9',
    gray6: '#97a1a7',
    gray7: '#7f8a93',
    gray8: '#5f6e78',
    gray9: '#374047',

    blue0: '#e4f0f9',
    blue1: '#c6e1f3',
    blue2: '#a5cfed',
    blue3: '#7db9e5',
    blue4: '#4a9eda',
    blue5: '#0077cc',
    blue6: '#006bb7',
    blue7: '#005da0',
    blue8: '#004d84',
    blue9: '#00365d'
  },
  radii: [0, 2, 4]
}

export default theme
